<template>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div>
        <h4>保障服务</h4>
        <div v-for="item in card" style="width: 30%;float: left;">
            <van-grid :column-num="3">
                <van-grid-item :key="value" />
                <div>
                    <img :src="item.img" alt="" width="100%" height="100px" @click="push" route>
                </div>
                <div style="padding: 5px;">
                    <p>{{ item.desc }}</p>
                    <p>到手价${{ item.price }}</p>
                </div>
            </van-grid>


    <p>刷新次数: {{ count }}</p>

        </div>
    </div>
    </van-pull-refresh>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant';
//引入路由
import {useRouter,useRoute} from 'vue-router'
//实例化
const router=useRouter()
const route=useRoute()
//商品信息
const card = ref([
    {id:111, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', price: 369, desc: 'OPPP屏碎保 屏碎保一年' },
    {id:222, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', price: 239, desc: 'OPPP屏碎保 屏碎保一年' },
    {id:333, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', price: 91, desc: 'OPPP屏碎保 屏碎保一年' },
    {id:444, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', price: 29.9, desc: 'OPPP屏碎保 屏碎保一年' },
    {id:555, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', price: 39.9, desc: 'OPPP屏碎保 屏碎保一年' },
    {id:666, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', price: 1399, desc: 'OPPP屏碎保 屏碎保一年' },
])
//跳转详情页
const push=()=>{
    router.push({
        path:'/detail',
    })
}
//刷新
const count = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };
</script>

<style lang="scss" scoped></style>